<template>
  <div>
    <div class="nav">
      <bread-crumb></bread-crumb>
    </div>
    <h1>不带头像的</h1>
    <div class="wrap">
      <el-table
        id="work-table"
        :data="tableData"
        style="width: 200%"
        border
        height="500px"
      >
        <el-table-column prop="stu_id" label="学号" width="170">
        </el-table-column>
        <el-table-column prop="stu_name" label="姓名" width="170">
        </el-table-column>
        <el-table-column prop="stu_sex" label="性别" width="170">
        </el-table-column>
        <el-table-column prop="stu_date" label="出生日期" width="170">
          <template slot-scope="scope">
            <p>{{ $moment(scope.row.stu_date).format("YYYY-MM-DD") }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="stu_jg" label="籍贯" width="170">
        </el-table-column>
        <el-table-column prop="stu_gbf" label="男或女朋友" width="170">
        </el-table-column>
        <el-table-column prop="stu_hobby" label="爱好" width="170">
        </el-table-column>
      </el-table>
      <el-button @click="exportExcel">导出到Excel</el-button>
    </div>
  </div>
</template>

<script>
import { req_stu_info_nohead } from "../../api/stuInfo";
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
  async mounted() {
    let result = await req_stu_info_nohead();
    console.log(result);
    this.tableData = result.data;
  },
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    exportExcel() {
      console.log("导出到Excel当中");
      let wb = XLSX.utils.table_to_book(document.getElementById("work-table"), {
        raw: true,
      });

      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "stuInfo.xlsx"
        );
      } catch (e) {
        console.log(e);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#work-table {
  border: 6px solid red;
}
.el-table-column {
  text-align: center;
}
h1{
  padding: 20px;
  text-align: center;
}
</style>